<template>
	<view >
		<view style="background-color: #efefef;z-index: -10;position: fixed;top: 0%;height: 20rpx;">
		</view>
		<view class="feedback_title">
			反馈类型
		</view>
		<view class="feedbacklist" >
			<!-- <view v-for="(item,index) in feedbacklist" :key="index" :class="type_btn?'active':'noactive'"
			@click="activecalss(index)"
			>
				{{item.text}}
			</view> -->
			<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
				<u-tag shape="circle" :text="item.text" :plain="!item.checked"  :name="index"
					@click="radioClick">
				</u-tag>
			</view>
		</view>
		
		
		
		<view class="feedback_title">
			我要反馈
		</view>
		<view class="textarea" >
			<textarea @input="input($event)"  v-model="content" placeholder="请输入您要反馈的内容(必填)" />
		</view>
		<view  class="btnview">
			<view :class="content==''? 'kongsureButton' : 'sureButton' " class="sureButton" @tap="submit()">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import Error from '@/core/untils/error/index';
	export default {
		data() {
			return {
				radios: [{text:'题干错别字',
										checked: true
									},
									{text:'答案错误',
										checked: false
									},
									{text:'解析看不懂',
										checked: false
									},
									{text:'解析错误',
										checked: false
									},
									{text:'图片不清晰',
										checked: false
									},
									{text:'其他',
										checked: false
									}
								],
					feedbacklist: [{text:'题干错别字',
											checked: true
										},
										{text:'答案错误',
											checked: false
										},
										{text:'解析看不懂',
											checked: false
										},
										{text:'解析错误',
											checked: false
										},
										{text:'图片不清晰',
											checked: false
										},
										{text:'其他',
											checked: false
										}
									],			
								
				
				type_btn:false,
				active:'active',
				noactive:'noactive',
				content:'',	
				
			}
		},
		computed: {
		    ...mapState(['subject', 'userinfo']), 
		},
		methods: {
			input($event){
				
				this.content=$event.detail.value 
			},
			async submit(){
				if(this.content.length<=10){
					this.$myUtils.$prompt.showToast({
					    icon: 'none',
					    title: '请完善反馈，不能少于10字哦~'
					});
					return
				}
				var that=this
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.doFeedback,
					data: {
						content:this.content, 
					},
					needLogin: true
				});
				
				if (res.code === 1) {  
					uni.showToast({
						title: '提交成功，感谢您的反馈',
						icon:'none',
						duration:3000
					})
					that.content='';
					that.feedbackList()
				}
			},
			activecalss(index){
				if(this.type_btn==false){
					this.type_btn=true
				}else if(this.type_btn==true){
					this.type_btn=false
				}
				
				
			},
			radioClick(name) {
							this.radios.map((item, index) => {
								item.checked = index === name ? true : false
							})
						},
			
		}
	}
</script>

<style>
.textarea{
		width:84%;margin:0 auto;
		border:1px solid #ddd;
		border-radius:10rpx;
		height:260rpx;
		font-size:28rpx;
		padding:30rpx;
		margin-top:30rpx;
		
		
	}
	.btnview{
		border-top: 1px solid #ddd;
		    position: fixed;
		    
		    bottom: 10rpx;
		    width: 100%;
		   
	}
	.sureButton{
		    width: 87%;
		    padding: 0 30rpx;
		    margin: 0 auto;
		    margin-top: 10rpx;
		    height: 80rpx;
		    line-height: 80rpx;
		    border-radius: 50rpx;
		    background: #38cefb;
		    color: #fff;
		    text-align: center;
			border: 1px #ffffff solid;
		
	}
	.kongsureButton{
		    width: 87%;
		    padding: 0 30rpx;
		    margin: 0 auto;
		    margin-top: 10rpx;
		    height: 80rpx;
		    line-height: 80rpx;
		    border-radius: 50rpx;
		   background-color:#81c2ff;
		   pointer-events: none;
		    color: #fff;
		    text-align: center;
			border: 1px #ffffff solid;
		
	}
	.feedback_title{
		border-radius: 20rpx;
		margin: 20rpx 10rpx;
		font-weight: 500;
	}
	.feedbacklist{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		
	}
	.noactive{
		padding: 10rpx 20rpx;
		    border-radius: 50rpx;
		    background: #fff;
		    color: #ababab;
			border: 1px #efefef solid;
		    font-size: 23rpx;
		    width: 22%;
		    margin: 15rpx auto;
		    text-align: center;
	}
	.active{
			padding: 10rpx 20rpx;
		    border-radius: 50rpx;
		    background: #38cefb;
		    color: #fff;
		    font-size: 23rpx;
		    width: 22%;
		    margin: 15rpx auto;
		    text-align: center;
			border: 1px #ffffff solid;
	}
	.u-page__tag-item {
			width: 30%;
			    margin: 15rpx auto;
		}
</style>
